<template>
    <div class="kecheng">
        <!--        查询课程-->
        <span class="from">
            <el-form :inline="true" :model="context" class="demo-form-inline">
            <el-form-item label="课程名称:">
                <el-input v-model="context.name" placeholder="请输入课程名"></el-input>
            </el-form-item>
                <!--                //日期-->
                <!--<el-date-picker
                        v-model="value1"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>-->
                <!--                //搜索日期-->
            <el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
            </el-form-item>
        </el-form>
        </span>
        <!--        新增课程-->
        <div style="margin-bottom: 30px">
            <el-button type="text" @click="resetData"
                       :style="{'background-color':'#409EFF',color:'#fff',textAlign:'center',width:'100px',padding:'10px 0'}">
                <span>新增课程</span>
            </el-button>
            <!--            新增课程-->
            <el-dialog :title="title" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="课程名称" :label-width="formLabelWidth">
                        <el-input v-model="form.coursename" autocomplete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="列表图url" :label-width="formLabelWidth">
                        <el-input v-model="form.tabularchart" autocomplete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="课程时长" :label-width="formLabelWidth">
                        <el-input v-model="form.coursetime" autocomplete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="课件数量" :label-width="formLabelWidth">
                        <el-input v-model="form.coursemount" autocomplete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="课程简介" :label-width="formLabelWidth">
                        <el-input v-model="form.courseintroduce" autocomplete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="适用人群" :label-width="formLabelWidth">
                        <el-input v-model="form.applicablepopulation" autocomplete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="课程分类" :label-width="formLabelWidth">
                        <el-input v-model="form.typeId" autocomplete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="学习收获" :label-width="formLabelWidth">
                        <el-input v-model="form.learnharvest" autocomplete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="订阅须知" :label-width="formLabelWidth">
                        <el-input v-model="form.subscriptionnotice" autocomplete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="阅读量" :label-width="formLabelWidth">
                        <el-input v-model="form.readingquantity" autocomplete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="咨询师id" :label-width="formLabelWidth">
                        <el-input v-model="form.teacherId" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="课程视频" :label-width="formLabelWidth">
                        <el-input v-model="form.coursevideo" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <!-------------------------------------------------------------------------------->
                <div slot="footer" class="dialog-footer">
                    <el-button @click="quxiao">取 消</el-button>
                    <el-button type="primary" @click="saveDate">保 存</el-button>
                </div>
                <!------------------------------------------------------------------->
            </el-dialog>
        </div>

        <!--        课程列表展示-->
        <template>
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%"
                    :header-cell-style="{'background-color':'#409EFF',color:'#fff',textAlign:'center'}"
                    :cell-style="{'text-align':'center'}">

                <el-table-column
                        prop="id"
                        label="ID">
                </el-table-column>
                <el-table-column
                        prop="coursename"
                        label="课程名称">
                </el-table-column>
                <!--                <el-table-column-->
                <!--                        prop="tabularchart"-->
                <!--                        label="列表图url">-->
                <!--                </el-table-column>-->

                <el-table-column prop="tabularchart" label="图片" width="150" align="center">
                    <template slot-scope="scope">
                        <div class="img-container">
                            <img :src="scope.row.tabularchart" style="width:100%;"/>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column
                        prop="coursetime"
                        label="课程时长">
                </el-table-column>
                <el-table-column
                        prop="coursemount"
                        label="课件数量">
                </el-table-column>
                <el-table-column
                        prop="courseintroduce"
                        label="课程简介">
                </el-table-column>
                <el-table-column
                        prop="applicablepopulation"
                        label="适用人群">
                </el-table-column>
                <el-table-column
                        prop="typeId"
                        label="课程分类">
                </el-table-column>
                <el-table-column
                        prop="learnharvest"
                        label="学习收获">
                </el-table-column>
                <el-table-column
                        prop="subscriptionnotice"
                        label="订阅须知">
                </el-table-column>
                <el-table-column
                        prop="readingquantity"
                        label="阅读量">
                </el-table-column>

                <el-table-column
                        prop="teacherId"
                        label="咨询师id">
                </el-table-column>

                <el-table-column
                        prop="coursevideo"
                        label="课程视频">
                </el-table-column>

                <el-table-column
                        label="操作">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.$index)" type="text" size="small">编辑</el-button>
                        <el-button
                                @click.native.prevent="deleteRow(scope.$index)"
                                type="text"
                                size="small">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>

        <!--        分页-->
     <!--   <div :style="{marginTop:'20px'}">
            <template>

                <div>
                    <el-pagination
                            @current-change="handleCurrentChange"
                            :current-page.sync="currentPage"
                            :page-size="pageSize"
                            :total="total2"
                            @prev-click="getPrePage"
                            @next-click="getNextPage"
                    >
                    </el-pagination>
                </div>
            </template>
        </div>-->

        <!--        删除操作-->
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%">
            <span>此操作将永久删除该文件是否继续</span>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="deleteData">确 定</el-button>
  </span>
        </el-dialog>


    </div>
</template>

<script>
    export default {
        name: "KeChengGuanLi",

        data() {
            return {
                //搜索所运用的属性
                value1: '',
                context: {
                    name: '',
                    region: ''
                },
                form: {
                    id: '',
                    coursename: '',
                    tabularchart: '',
                    coursetime: '',
                    coursemount: '',
                    courseintroduce: '',
                    applicablepopulation: '',
                    typeId: '',
                    learnharvest: '',
                    subscriptionnotice: '',
                    readingquantity: '',
                    teacherId: '',
                    coursevideo: '',

                },
                tableData: [],
                teachers: [],
                articleType: [],
                dialogFormVisible: false,
                dialogTableVisible: false,
                dialogTableVisible2: false,
                dialogVisible: false,
                formLabelWidth: '120px',
                title: '',
                state: '',
                value: '',
                valuec: '',
                valueType: '',
                valueTypec: '',

            //    分页
            //     currentPage:1,
            //     pageSize:3,
            //     total2:'',
              //  pageCount:'',

            }
        },
        created() {
            this.refresh();

        },
        methods: {
            quxiao() {
                this.dialogFormVisible = false
                console.log(this.value)
                console.log(this.valueType)
            },


            //获取时间
            getDateString(date) {
                let yy = date.getFullYear();
                let mm = date.getMonth() + 1;
                let dd = date.getDate();
                let hh = date.getHours();
                let mf = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
                let ss = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
                let str = yy + "-" + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
                return str;
            },
            //查找课程
            onSubmit() {
                this.axios.get("/course/findByLikeCourseName", {
                    params: {
                        coursename: this.context.name,

                    }
                }).then(res => {
                    this.tableData = res.data.data
                })
            },
            //获取所有课程列表
            refresh() {
                this.axios.get("/course/findAllCourse"/*,{
                    params:{
                        pageNum:this.currentPage,
                        pageSize:this.pageSize
                    }
                    }*/
                ).then(res => {
                    console.log(res);

                    this.tableData = res.data.data;
                    // this.total2=res.data.data.total;


                })
            },

            //新增数据刷新
            resetData() {
                this.title = '新增课程';
                this.state = 1;
                this.dialogFormVisible = true;
                this.form.id = '';
                this.form.coursename = '';
                this.form.tabularchart = '';
                this.form.coursetime = '';
                this.form.coursemount = '';
                this.form.courseintroduce = '';
                this.form.applicablepopulation = '';
                this.form.typeId = '';
                this.form.learnharvest = '';
                this.form.subscriptionnotice = '';
                this.form.readingquantity = '';
                this.form.teacherId = '';
                this.form.coursevideo = '';
            },
            //新增数据
            insertData() {
                this.axios.post("/course/addSelective", {

                    coursename: this.form.coursename,
                    tabularchart: this.form.tabularchart,
                    coursetime: this.form.coursetime,
                    coursemount: this.form.coursemount,
                    courseintroduce: this.form.courseintroduce,
                    applicablepopulation: this.form.applicablepopulation,
                    typeId: this.form.typeId,
                    learnharvest: this.form.learnharvest,
                    subscriptionnotice: this.form.subscriptionnotice,
                    readingquantity: this.form.readingquantity,
                    teacherId: this.form.teacherId,
                    coursevideo: this.form.coursevideo,
                }).then(res => {
                    console.log(res)
                })
            },
            //保存数据
            saveDate() {
                if (this.state === 1) {
                    this.insertData();
                    setTimeout(() => {
                        this.refresh()
                    }, 500);
                }
                if (this.state === 2) {
                    this.updateDate();
                    setTimeout(() => {
                        this.refresh()
                    }, 500);
                }
                this.dialogFormVisible = false;

            },
            //修改数据显示
            handleClick(index) {
                //还没改动
                this.title = '编辑课程';
                this.state = 2;
                console.log(index);
                this.dialogFormVisible = true;
                console.log(this.tableData);
                this.form.id = this.tableData[index].id;

                this.form.coursename = this.tableData[index].coursename;
                this.form.tabularchart = this.tableData[index].tabularchart;
                this.form.coursetime = this.tableData[index].coursetime;
                this.form.coursemount = this.tableData[index].coursemount;
                this.form.courseintroduce = this.tableData[index].courseintroduce;
                this.form.applicablepopulation = this.tableData[index].applicablepopulation;
                this.form.typeId = this.tableData[index].typeId;
                this.form.learnharvest = this.tableData[index].learnharvest;
                this.form.subscriptionnotice = this.tableData[index].subscriptionnotice;
                this.form.readingquantity = this.tableData[index].readingquantity;
                this.form.teacherId = this.tableData[index].teacherId;
                this.form.coursevideo = this.tableData[index].coursevideo;


            },
            //修改数据
            updateDate() {
                this.axios.post("/course/changeSelective", {

                    id: this.form.id,
                    coursename: this.form.coursename,
                    tabularchart: this.form.tabularchart,
                    coursetime: this.form.coursetime,
                    coursemount: this.form.coursemount,
                    courseintroduce: this.form.courseintroduce,
                    applicablepopulation: this.form.applicablepopulation,
                    typeId: this.form.typeId,
                    learnharvest: this.form.learnharvest,
                    subscriptionnotice: this.form.subscriptionnotice,
                    readingquantity: this.form.readingquantity,
                    teacherId: this.form.teacherId,
                    coursevideo: this.form.coursevideo,

                    // name:this.form.name,
                    // publicitytext:this.form.publicitytext,
                    // createtime:this.getDateString(new Date()),
                }).then(res => {
                    console.log(this.form.id)
                    console.log(res)
                    setTimeout(() => {
                        this.refresh()
                    }, 500)
                })
            },
            //删除数据
            deleteRow(index) {
                // console.log(index)
                //
                this.dialogVisible = true;
                this.form.id = this.tableData[index].id;
                // console.log(this.form.id)
                console.log(this.form.id);
            },
            deleteData() {
                this.dialogVisible = false;
                this.axios.delete("/course/removeById", {
                    params: {
                        id: this.form.id
                    },

                }).then(res => {
                    console.log(res)
                    setTimeout(() => {
                        this.refresh()
                    }, 500)
                })
            },
        //    分页
      /*      handleCurrentChange(val) {
                this.currentPage=val;
                this.refresh();
            },
            getPrePage(val) {
                this.currentPage=val;
                this.refresh();
            },
            getNextPage(val) {
                this.currentPage=val;
                this.refresh();
            },*/
        },
    }
</script>

<style scoped>

</style>